<template>
  <div>
    <a-card>
      <vxe-button status="primary" icon="vxe-icon-add" @click="addEvent"
        >新增</vxe-button
      >
      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
        <template #kind="{ row }">
          {{row.kind.union_name}}
        </template>

        <template #action="{ row }">
          <vxe-button
            status="primary"
            content="编辑"
            @click="editRow(row)"
          ></vxe-button>
          <a-popconfirm
            title="确定删除吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="remove(row)"
          >
            <vxe-button status="primary" content="删除"></vxe-button>
          </a-popconfirm>
        </template>
      </vxe-grid>
    </a-card>
    <DraggableModal
      v-model:open="showEditPopup"
      title="汽车"
      :centered="true"
      :footer="false"
      :keyboard="false"
    >
      <div>
        <a-form
          :model="formState"
          name="basic"
          ref="formRef"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
        >
          <a-form-item
            label="车牌"
            name="serial"
            :rules="[{ required: true, message: 'serial' }]"
          >
            <a-input v-model:value="formState.serial" />
          </a-form-item>

          <a-form-item
            label="维修车型"
            name="kind_id"
            :rules="[{ required: true, message: '维修车型' }]"
          >
            <a-select v-model:value="formState.kind_id">
              <a-select-option
                v-for="(item, index) in kindOpts"
                :key="index"
                :value="item.id"
              >
                {{ item.union_name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="年检时间"
            name="inspection"
            :rules="[{ required: true, message: '年检时间' }]"
          >
            <a-input v-model:value="formState.inspection" />
          </a-form-item>

          <a-form-item
            label="保养时间"
            name="maintenance"
            :rules="[{ required: true, message: '保养时间' }]"
          >
            <a-input v-model:value="formState.maintenance" />
          </a-form-item>
          <a-form-item
            label="状态"
            name="state"
            :rules="[{ required: true, message: '状态' }]"
          >
            <a-radio-group v-model:value="formState.state" name="state">
              <a-radio value="1">正常</a-radio>
              <a-radio value="2">停用</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
            <a-button type="primary" @click="onSubmit" style="width: 300px"
              >提交</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </DraggableModal>
  </div>
</template>

<script setup lang="ts">
import { VxeUI } from "vxe-pc-ui";
import { message } from "ant-design-vue";
import Api from "@/api/backend/api";
const { gridOptions } = useCar();

import XEUtils from "xe-utils";
const router = useRouter();
const formRef = ref();
const showEditPopup = ref(false);
const loading = ref(false);
const selectRow = ref<RowVO>();

const addEvent = () => {
  formState.value.id = null;
  formState.value.serial = "";
  formState.value.kind_id = null;
  formState.value.inspection = null;
  formState.value.maintenance = null;
  formState.value.state = "1";
  showEditPopup.value = true;
};
const editRow = (row) => {
  showEditPopup.value = true;
  formState.value = row;
};

const formState = ref({
  id: null,
  serial: "",
  kind_id: "",
  inspection: "",
  maintenance: "",
  state: "",
});
const kindOpts = ref([]);
const getKindOpts = async () => {
  kindOpts.value = await Api.kindController.option();
};
getKindOpts();

const onSubmit = async () => {
  console.log(333);
  try {
    //先清空一下验证
    formRef.value.clearValidate();
    if (formState.value.id == null) {
      await Api.carController.store(formState.value);
    } else {
        console.log(formState.value)
      await Api.carController.update({id:formState.value.id},formState.value);
    }
    xGrid.value.commitProxy("query");
    formRef.value.resetFields();
  } catch (error) {
    console.error(error)
    formRef.value.validate();
  }
};
const xGrid = ref();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};

const remove = async (row: any) => {
  await Api.carController.destroy({
    id: row.id,
  });
  xGrid.value.commitProxy("query");
};
</script>

<style></style>
